<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet/less" href="./css/reset.less">
    <link rel="stylesheet/less" href="./css/common.less">
    <link rel="stylesheet/less" href="./css/index.less">
</head>

<body>
    <nav class="navbar navbar-inverse">
        <!-- 宽度是按100%占满 -->
        <div class="container-fluid nav-container container-logo">
            <!-- logo和移动端的导航栏样式 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SPIRIT8</a>
            </div>

            <!-- 导航内容 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#HOME">HOME</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#team">team</a></li>
                    <li><a href="#team">serivce</a></li>
                    <li><a href="#team">bsghd</a></li>
                    <li><a href="#team">comcit</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="nav2">
        <div class="nav2title">welcome on <span>spirit8</span></div>
        <div class="nav2p">We are a digital agency with <span>years of experience</span> and with <span>extraordinary
                people</span></div>
        <div class="nav2btn"></div>
    </div>

    <div class="nav3">
        <div class="nav3ds">
            <img src="./image/电脑.png" alt="">
        </div>
        <div class="nav3dp">
            <h3 class="bav3tltle1">About us</h3>
            <h3 class="bav3tltle1">Some words <strong>about us</strong></h3>
            <div class="nav3hen"></div>
            <div class="nav3tp">
                <p class="nav3p">We love building and rebuilding brands through our specific skills. Using colour,
                    fonts, and illustration, we brand companies in a way they will never forget.</p>
            </div>
            <div class="nav3msc">
                <div class="nav3m">
                    <div class="nav3s"></div>
                    <div class="nav3c">Mission - <span>We deliver uniqueness and quality</span></div>
                </div>
                <div class="nav3m">
                    <div class="nav3s"></div>
                    <div class="nav3c">Skills - <span>Delivering fast and excellent results</span></div>
                </div>
                <div class="nav3m">
                    <div class="nav3s"></div>
                    <div class="nav3c">Clients - <span>Satisfied clients thanks to our experience</span></div>
                </div>
            </div>
            <button class="nav3btn">Browse our work</button>
        </div>
    </div>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="nav4">
                    <h3 class="nav4tltle"><span>Meet</span> our team</h3>
                    <div class="nav4hen1"></div>
                    <div class="nav4hen2"></div>
                    <div class="nav4mk">
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="nav4">
                    <h3 class="nav4tltle"><span>Meet</span> our team</h3>
                    <div class="nav4hen1"></div>
                    <div class="nav4hen2"></div>
                    <div class="nav4mk">
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="nav4">
                    <h3 class="nav4tltle"><span>Meet</span> our team</h3>
                    <div class="nav4hen1"></div>
                    <div class="nav4hen2"></div>
                    <div class="nav4mk">
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                        <div class="nav4xmk">
                            <div class="nav4circle"></div>
                            <h3 class="nav4tltlel">Van Damme</h3>
                            <h3 class="nav4tltle2">No English</h3>
                            <div class="nav4tp">
                                <p class="nav4p">Do not seek to change what has come before. Seek to create that which
                                    has not.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="nav5">
        <h3 class="nav5tltle"><span>take a look at</span> our services</h3>
        <div class="nav5hen1"></div>
        <div class="nav5hen2"></div>
        <div class="nav5p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
            Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
            from a line in section 1.10.32.</div>
        <div class="nav5mk">
            <div class="nav5xmk">
                <div class="nav5circle"></div>
                <h3 class="nav5tltlel">Van Damme</h3>
                <div class="nav5tp">
                    <p class="nav5p">Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="nav5xmk">
                <div class="nav5circle"></div>
                <h3 class="nav5tltlel">Van Damme</h3>
                <div class="nav5tp">
                    <p class="nav5p">Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="nav5xmk">
                <div class="nav5circle"></div>
                <h3 class="nav5tltlel">Van Damme</h3>
                <div class="nav5tp">
                    <p class="nav5p">Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="nav5xmk">
                <div class="nav5circle"></div>
                <h3 class="nav5tltlel">Van Damme</h3>
                <div class="nav5tp">
                    <p class="nav5p">Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
        </div>
    </div>

    <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="nav6">
                    <h3 class="nav6tltle"><span>take a look at</span> our services</h3>
                    <div class="nav6hen1"></div>
                    <div class="nav6hen2"></div>
                    <h3 class="nav6title2"></h3>
                </div>
            </div>
            <div class="item">
                <div class="nav6">
                    <h3 class="nav6tltle"><span>take a look at</span> our services</h3>
                    <div class="nav6hen1"></div>
                    <div class="nav6hen2"></div>
                    <h3 class="nav6title2"></h3>
                </div>
            </div>
            <div class="item">
                <div class="nav6">
                    <h3 class="nav6tltle"><span>take a look at</span> our services</h3>
                    <div class="nav6hen1"></div>
                    <div class="nav6hen2"></div>
                    <h3 class="nav6title2"></h3>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="nav7">
        <h3 class="nav7tltle"><span>take a look at </span>our work</h3>
        <div class="nav7hen1"></div>
        <div class="nav7hen2"></div>
        <div class="nav7p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
            Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
            from a line in section 1.10.32.</div>
        <div class="nav7xc">
            <div class="nav7xp">
                <div class="nav7xtitle">Filter by type</div>
                <div class="nav7xtitle">All <span>| Web design | Mobile design | Photograpy</span></div>
            </div>
            <div class="nav7xd">
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
                <div class="nav7xdp">
                    <img src="./image/nav7tp.png" alt="1">
                </div>
            </div>
        </div>
    </div>


    <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="nav8">
                    <h3 class="nav8tltle"><span>our clients’ </span>testimonials</h3>
                    <div class="nav8hen1"></div>
                    <div class="nav8hen2"></div>
                    <div class="nav8p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                        Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on
                        the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
                        ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    <h3 class="nav8h">Dean Martin, <span>CEO Acme Inc.</span></h3>
                </div>
            </div>
            <div class="item">
                <div class="nav8">
                    <h3 class="nav8tltle"><span>our clients’ </span>testimonials</h3>
                    <div class="nav8hen1"></div>
                    <div class="nav8hen2"></div>
                    <div class="nav8p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                        Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on
                        the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
                        ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    <h3 class="nav8h">Dean Martin, <span>CEO Acme Inc.</span></h3>
                </div>
            </div>
            <div class="item">
                <div class="nav8">
                    <h3 class="nav8tltle"><span>our clients’ </span>testimonials</h3>
                    <div class="nav8hen1"></div>
                    <div class="nav8hen2"></div>
                    <div class="nav8p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                        Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on
                        the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
                        ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    <h3 class="nav8h">Dean Martin, <span>CEO Acme Inc.</span></h3>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="nav9">
        <h3 class="nav9tltle"><span>feel free to </span>contact us</h3>
        <div class="nav9hen1"></div>
        <div class="nav9hen2"></div>
        <div class="nav9p">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
            Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
            from a line in section 1.10.32.</div>
        <div class="nav9ip">
            <div class="nav9ip1">
                <div class="nav9intput">
                    <h3 class="nav9h">Name <span>*</span></h3>
                    <input type="text" class="inpt">
                </div>
                <div class="nav9intput">
                    <h3 class="nav9h">Email Address<span>*</span></h3>
                    <input type="text" class="inpt">
                </div>
            </div>
            <div class="nav9ip2">
                <h3 class="nav9h">Message<span>*</span></h3>
                <input type="text" class="inpt">
            </div>
        </div>
        <div class="nav9tbtn">
            <button class="nav9btn">SEND</button>
        </div>
    </div>

    <div class="nav10">
        <div class="nav10footer">
            <div class="nav10p">sdhaedhk sjavwuwadv sGVYUAj</div>
        </div>
        <div class="nav10footer">
            <div class="nav10p">
                <div class="nav10qiu"></div>
                <div class="nav10qiu"></div>
                <div class="nav10qiu"></div>
                <div class="nav10qiu"></div>
            </div>
        </div>
    </div>

</body>

</html>
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.js"></script>